'use client'

import { BUG_LEVEL, BUG_PRIORITY, ISSUE_STATE, ISSUE_TYPE, IssueInfo, PROCESS_STAGE, ShareInfo, TASK_PRIORITY } from "@/grpc/types";
import moment from "moment";
import type { ColumnsType } from 'antd/lib/table';
import { getStateColor, issueState } from "@/utils/issue_utils";
import { Space, Table } from "antd";

export interface IssueListProps {
    issueInfoList: IssueInfo[];
}

export function IssueList(props: IssueListProps) {

    const renderState = (val: ISSUE_STATE) => {
        const v = issueState[val];
        return (
            <div
                style={{
                    background: `rgb(${getStateColor(val)} / 20%)`,
                    width: '50px',
                    margin: '0 auto',
                    borderRadius: '50px',
                    textAlign: 'center',
                    color: `rgb(${getStateColor(val)})`,
                }}
            >
                {v.label}
            </div>
        );
    };

    const columns: ColumnsType<IssueInfo> = [
        {
            title: `类别`,
            dataIndex: 'issueType',
            width: 100,
            render: (v: number) => {
                return v == ISSUE_TYPE.ISSUE_TYPE_BUG ? "缺陷" : "任务";
            },
        },
        {
            title: `名称`,
            ellipsis: true,
            dataIndex: ['basicInfo', 'title'],
            width: 250,
        },
        {
            title: "关联需求",
            ellipsis: true,
            width: 250,
            render: (_, row: IssueInfo) => (
                <>
                    {row.requirementId == "" && "-"}
                    {row.requirementId != "" && row.requirementTitle}
                </>
            )
        },
        {
            title: `状态`,
            dataIndex: 'state',
            width: 100,
            align: 'center',
            render: (val: number) => renderState(val),
        },
        {
            title: "处理子阶段",
            width: 100,
            render: (_, row: IssueInfo) => {
                if (row.state == ISSUE_STATE.ISSUE_STATE_PROCESS) {
                    if (row.processStage == PROCESS_STAGE.PROCESS_STAGE_TODO) {
                        return "未开始";
                    } else if (row.processStage == PROCESS_STAGE.PROCESS_STAGE_DOING) {
                        return "执行中";
                    } else if (row.processStage == PROCESS_STAGE.PROCESS_STAGE_DONE) {
                        return "待检查";
                    }
                }
                return "";
            }
        },
        {
            title: '优先级',
            width: 100,
            render: (_, row: IssueInfo) => {
                if (row.issueType == ISSUE_TYPE.ISSUE_TYPE_BUG) {
                    return (
                        <>
                            {row.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_LOW && <span style={{ color: "#1D85F8" }}>低优先级</span>}
                            {row.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_NORMAL && <span style={{ color: "#06C776" }}>正常处理</span>}
                            {row.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_HIGH && <span style={{ color: "#F99B00" }}>高度重视</span>}
                            {row.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_URGENT && <span style={{ color: "#FB6D17" }}>急需解决</span>}
                            {row.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_IMMEDIATE && <span style={{ color: "#DF0627" }}>马上解决</span>}
                        </>
                    );
                } else {
                    return (
                        <>
                            {row.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_LOW && <span style={{ color: "#1D85F8" }}>低优先级</span>}
                            {row.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_MIDDLE && <span style={{ color: "#06C776" }}>正常处理</span>}
                            {row.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_HIGH && <span style={{ color: "#F99B00" }}>高度重视</span>}
                        </>
                    );
                }

            },
        },
        {
            title: '处理人',
            width: 100,
            render: (_, row: IssueInfo) => (
                <>
                    {(row.execUserId ?? "") != "" && (
                        <Space>
                            {row.execDisplayName ?? ""}
                        </Space>
                    )}
                </>
            ),
        },
        {
            title: '验收人',
            width: 100,
            render: (_, row: IssueInfo) => (
                <>
                    {(row.checkUserId ?? "") != "" && (
                        <Space>
                            {row.checkDisplayName ?? ""}
                        </Space>
                    )}
                </>
            ),
        },
        {
            title: '剩余工时',
            width: 100,
            render: (_, row: IssueInfo) => (
                <>
                    {row.hasRemainMinutes == true && ((row.remainMinutes ?? 0) / 60).toFixed(1) + "小时"}
                </>
            )
        },
        {
            title: '预估工时',
            width: 100,
            render: (_, row: IssueInfo) => (
                <>
                    {row.hasEstimateMinutes == true && ((row.estimateMinutes ?? 0) / 60).toFixed(1) + "小时"}
                </>
            ),
        },
        {
            title: '预估完成时间',
            width: 120,
            render: (_, row: IssueInfo) => (
                <>
                    {row.hasEndTime == true && moment(row.endTime ?? 0).format("YYYY-MM-DD")}
                </>
            ),
        },
    ];

    return (
        <Table
            rowKey={'issueId'}
            columns={columns}
            dataSource={props.issueInfoList}
            scroll={{x: 1300}}
            pagination={false}
        />
    );
}